<script setup>
import { useRouter } from "vue-router";
import { getCurrentWindow } from '@tauri-apps/api/window'
import logo from "@/assets/logo.png";
import {
  CloseCircleSharp,
  RemoveCircle,
  ScanCircle,
  SearchCircle,
  Sunny,
  Moon,
  ChevronBack,
  ChevronForward,
} from "@vicons/ionicons5";

var appWin = getCurrentWindow();
const router = useRouter();
function nav_go(isRight) {
  router.go(isRight?1:-1);
}
</script>

<template>
  <div class="px-4">
    <img :src="logo" style="height: 42px" />
  </div>
  <div class="flex items-center pl-10 justify-around w-24">
    <n-button text title="Back" @click="nav_go(false)">
      <n-icon size="24" > <ChevronBack /> </n-icon>
    </n-button>
    <n-button text title="Right" @click="nav_go(true)">
      <n-icon size="24" > <ChevronForward /> </n-icon>
    </n-button>
  </div>
  <div class="flex items-center pl-4">
    <n-input-group class="">
      <n-input placeholder="搜索" class="w-40" round size="small"> </n-input>
      <n-button type="info" round size="small"> 搜索 </n-button>
    </n-input-group>
  </div>
  <div class="flex-grow select-none" data-tauri-drag-region></div>
  <div class="flex items-center">
    <n-button text title="最小化" @click="appWin.minimize()">
      <n-icon size="20" color="green" class="opacity-100 hover:opacity-60">
        <RemoveCircle />
      </n-icon>
    </n-button>
    <n-button text title="最大化" @click="appWin.toggleMaximize()">
      <n-icon size="20" color="blue" class="opacity-100 hover:opacity-60">
        <ScanCircle />
      </n-icon>
    </n-button>
    <n-button text title="关闭" @click="appWin.close()">
      <n-icon size="20" color="red" class="opacity-100 hover:opacity-60">
        <CloseCircleSharp />
      </n-icon>
    </n-button>
  </div>
</template>

<style scoped></style>
